<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>全表登记作业完成情况</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">
      <div class="box-search2">

        <div class="box-input2" style="width: 180px">
          <el-input  @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" clearable
                     size="mini" v-model="searchInfo.searchKey" placeholder="作业名称"></el-input>
        </div>
        <div class="box-input2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="clkBtnSearch">搜索</el-button>
        </div>
        <div class="box-input2" style="display: flex">
          <div style="display: flex">
            <div class="square-status square-no">  </div>
            <div style="padding:3px 10px 3px 4px; font-size:14px;">未处理</div>
          </div>
          <div style="display: flex">
            <div class="square-status square-weiwancheng">   </div>
            <div style="padding:3px 10px 3px 4px; font-size:14px;">未完成</div>
          </div>

          <div style="display: flex">
            <div class="square-status square-yiwancheng">   </div>
            <div style="padding:3px 10px 3px 4px; font-size:14px;">已完成</div>
          </div>

        </div>

      </div>

      <div class="box-content2">
        <div class="box-table2">
          <el-table class="tbl1" :data="studentZuoyePage.list"
                    :cell-class-name="tableCellClassName"
                    :header-cell-style="zuoyeListHeaderStyleFunc" :border="true" :stripe="true" size="small">

            <el-table-column type="index"  label="序号" width="55">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="作业名称" width="150" align="left">
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">{{scope.row.buzhi_zuoye_title}}</div>
                  <span class="zuoye_title">{{scope.row.buzhi_zuoye_title}}</span>
                </el-tooltip>

              </template>
            </el-table-column>

            <el-table-column label="布置日期" width="80">
              <template slot-scope="scope">
                <span >{{scope.row.buzhi_date|filterDateFormat1 }}</span>
              </template>
            </el-table-column>

            <el-table-column v-for="(col1,col1Index) in groupWithStudents"
                             :key="s" :label="s">
              <el-table-column v-for="(col2) in col1.students" :key="col2.noid"
                               :label="col2.student_realname" :width="33">
                <template slot-scope="scope">

                  <div v-if="scope.row.studentZuoyeMap[col2.noid]==null "
                       class="square-status square-no">   </div>

                  <div v-if="scope.row.studentZuoyeMap[col2.noid]!=null &&
                  scope.row.studentZuoyeMap[col2.noid]['wancheng_status']==0 "
                       class="square-status square-weiwancheng">   </div>

                  <div v-if="scope.row.studentZuoyeMap[col2.noid]!=null &&
                  scope.row.studentZuoyeMap[col2.noid]['wancheng_status']==1 " @contextmenu.prevent="show(scope.row,scope.column,$event)"
                       class="square-status square-yiwancheng">


                  </div>
                </template>

              </el-table-column>
            </el-table-column>

          </el-table>
          <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
            <li><el-button size="mini" @click="checkZuoye()">查看</el-button></li>
            <li><el-button size="mini" @click="dowloadZuoye()">下载</el-button></li>
          </ul>

        </div>
        <div class="box-page2">
          <el-pagination layout="prev, pager, next" :total="studentZuoyePage.total"
                         :current-page="studentZuoyePage.pageNum" :page-size="studentZuoyePage.pageSize"
                         @current-change="chgCurrPage">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed: {
      loginUserInfo() {
        return this.$store.state.loginUserInfo;
      },

    },
    data() {
      return {
        searchInfo: {searchKey: null},
        studentZuoyePage: {pageNum:1 ,pageSize:12, list:[] },

        visible: false,
        left: 0,
        top: 0,
        pageLoading: false,

        showAddBuzhiZuoyeDialog: false,
        rowinfo:{},
        columninfo:{},
        file_Path: '',

        buzhiZuoye: {},

        groupWithStudents:[],

      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      },
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/full_table_dengji_zuoye_mgr') {
            this._initData();
          }

        }, immediate: true
      },
    },
    methods: {
      _initData() {
        this.loadGroupWithStudents();
        this.getList();
      },
      show(row,column,e){
        if(this.$store.state.leftMenuStatus == "open"){
          this.left = e.pageX - 210;
        }else {
          this.left = e.pageX - 50;
        }
        this.top = e.pageY;
        this.rowinfo = row;
        this.columninfo = column;
        this.visible = true;
      },
      closeMenu() {
        this.visible = false;
      },
      clkBtnSearch() {
        this.getList();
      },

      loadGroupWithStudents(){
        if(this.groupWithStudents.length>0){
          return;
        }

        let url1 = this.settings.apiUrl + '/student_group_extend/list_with_students';
        let d1 = {};

        request.post(url1, d1).then((d1r) => {

          if (d1r.code === 0) {
            this.groupWithStudents = d1r.data;
          }
        })

      },
      getList() {
        let url1 = this.settings.apiUrl + '/student_zuoye/full_table_page';
        let d1 = {};
        d1.pageNum = this.studentZuoyePage.pageNum;
        d1.pageSize = this.studentZuoyePage.pageSize;

        d1.searchKey = this.searchInfo.searchKey;

        request.post(url1, d1).then((d1r) => {
          this.pageLoading = false;
          if (d1r.code === 0) {
            this.studentZuoyePage = d1r.data;
          } else {

            this.$alert('获取学生的作业信息失败：' + d1r.msg, '提示', {
              type: 'warning'
            });

          }
        }).catch(err => {
          this.pageLoading = false;
        });
      },
      // 点击刷新所有作业的学生完成情况
      clkBtnRefresh() {
        this.buzhiZuoye = {};
      },
      clkBtnEdit(row) {
        this.buzhiZuoye = JSON.parse(JSON.stringify(row));
        this.showAddBuzhiZuoyeDialog = true;
      },
      clkBtnDelete(row) {

        this.$confirm('您确信要删除该记录吗', "提示").then(() => {

        })
      },
      checkZuoye(){
        let noid = this.rowinfo.studentZuoyeList[this.columninfo.index - 3].noid;
        this.$router.push({path:'/admin/zuoye_show',query:{id:noid}});
      },
      dowloadZuoye(){
        let file_Path = this.rowinfo.studentZuoyeList[this.columninfo.index - 3].zuoye_file_path;
        if(file_Path != null) {
          let url = this.settings.apiUrl + "/student_zuoye/zuoye_download_path";
          let row = this.rowinfo;
          let d1 = {row};
          request.post(url,d1).then((d1r => {
            if (d1r.code == 0) {
              window.open(d1r.data.download_path + "/" + file_Path);
            }
          }))
        }
      },
      chgCurrPage(val){
        this.studentZuoyePage.pageNum = val;
        this.getPage();
      },
      getPage(){
        this.getList();
      },
      tableCellClassName({row, column, rowIndex, columnIndex}){
        row.index=rowIndex;
        column.index=columnIndex;
      },
      zuoyeListHeaderStyleFunc({row, column, rowIndex, columnIndex}){

        // 列表的主要列数
        let mainColumnCount = 4;
        let style1= { 'border-color' : '#cccccc'};
        style1['text-align']='center';

        if(columnIndex >= mainColumnCount-1 && rowIndex == 0) {
          style1['color']='#333333';


          if(columnIndex%2==0) {
            style1['background-color'] = '#FFED97';
          }else{
            style1['background-color'] = '#CEFFCE';
          }

        }
        if(rowIndex == 1){
          style1['color']='#333333';
          style1['background-color'] = '#E8FFC4';
        }
        return style1;
      }



    },
    filters:{
      filterSex(srcVal){
        if(srcVal==1){
          return '男';
        }
        if(srcVal==2){
          return '女';
        }
        return '未知';
      },
      filterDateFormat1(srcVal){
        if(!srcVal){
          return "";
        }
        if(srcVal.length<10){
          return srcVal;
        }
        return srcVal.substr(0,10);
      },
      filterMultiText(srcVal){

        return srcVal;
      }
    }

  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-header2{
    height: 30px;
    background-color: #eceeef;
    padding-left:20px;
    padding-top:8px;

  }

  .box-search2{
    display: flex;
  }
  .box-page2{
    display: flex;
    justify-content: flex-end;
  }
  .box-content2 .box-table2 .zuoye_title{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:nowrap;
  }

  .box-search2{
    padding-bottom: 10px;
    .box-input2{
      padding-right:10px;
    }
  }

  .btn-mini{
    >>>.el-radio-button__inner{
      padding-left: 6px;
      padding-right:6px;
    }
  }

  .square-status{
    margin:auto;width:16px;height:16px;
    &.square-no{
      background-color:#BEBEBE;
    }
    &.square-no-exam{
      background-color:#005682;
    }
    &.square-weiwancheng{
      background-color:#005682;
    }
    &.square-yiwancheng{
      background-color: #13ce66;
    }
  }


  .contextmenu {
    margin: 0;
    /*background: #fff;*/
    z-index: 3000;
    position: absolute;
    width: 30px;
    padding: 5px 0;
    list-style: none;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  }


</style>
